<script lang="ts">
  import { computed, defineComponent, h, unref } from 'vue'
  import BasicButton from './BasicButton.vue'
  import { Popconfirm } from 'ant-design-vue'
  import { extendSlots } from '/@/utils/helper/tsxHelper'
  import { omit } from 'lodash-es'
  import { useAttrs } from '/@/hooks/core/useAttrs'
  import { useI18n } from '/@/hooks/web/useI18n'

  const props = {
    /**
     * Whether to enable the drop-down menu
     * @default: true
     */
    enable: {
      type: Boolean,
      default: true,
    },
  }

  export default defineComponent({
    name: 'PopButton',
    inheritAttrs: false,
    props,
    setup(props, { slots }) {
      const { t } = useI18n()
      const attrs = useAttrs()

      // get inherit binding value
      const getBindValues = computed(() => {
        return Object.assign(
          {
            okText: t('common.okText'),
            cancelText: t('common.cancelText'),
          },
          { ...props, ...unref(attrs) },
        )
      })

      return () => {
        const bindValues = omit(unref(getBindValues), 'icon')
        const btnBind = omit(bindValues, 'title') as Recordable
        if (btnBind.disabled) btnBind.color = ''
        const Button = h(BasicButton, btnBind, extendSlots(slots))

        // If it is not enabled, it is a normal button
        if (!props.enable) {
          return Button
        }
        return h(Popconfirm, bindValues, { default: () => Button })
      }
    },
  })
</script>
